<template>
	<view class="photo-video">
		<!-- 图片 -->
		<template v-if="status == 'image'">
			<view @click="handlePreviewImage(index)" v-for="(item, index) in data" :key="index">
				<image :src="item"></image>
			</view>
		</template>
		<template v-if="status === 'video'">
			<video @click="show = true" :src="src" :controls="false" :show-center-play-btn="false"></video>
		</template>
		<view class="i"></view>
	</view>
	<up-popup :show="show" mode="center" bgColor="#000" :overlayOpacity="0.8" @close="close">
		<video style="width: 100vw;" v-if="show" :src="src"></video>
		<image @click="show = false" class="close" mode="widthFix" src="@/static/image/close2.png"></image>
	</up-popup>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	const props = defineProps({
		data: {
			type: Array,
			default: () => []
		},
		src: {
			type: String,
			default: ''
		},
		status: {
			type: String,
			default: 'image'
		}
	})
	const show = ref(false)
	// 预览图片
	const handlePreviewImage = (index) => {
		// 预览图片
		uni.previewImage({
			urls: props.data,
			current: index,
			longPressActions: {
				itemList: ['发送给朋友', '保存图片', '收藏'],
				success: function(data) {
					console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
				},
				fail: function(err) {
					console.log(err.errMsg);
				}
			}
		});
	}
	const close = () => {
		show.value = false
	}
</script>

<style lang="scss" scoped>
	.photo-video {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		image,
		video {
			width: calc((100vw - 48rpx - 48rpx - 62rpx - 52rpx) / 3);
			height: calc((100vw - 48rpx - 48rpx - 62rpx - 52rpx) / 3);
			object-fit: cover;
			border-radius: 32rpx;
			margin-bottom: 26rpx;
		}

		.i {
			width: calc((100vw - 48rpx - 48rpx - 62rpx - 52rpx) / 3);
		}
	}

	.close {
		width: 50rpx;
		position: fixed;
		top: 10px;
		right: 20px;
		z-index: 1000;
	}
</style>